<template>
	<view>
		<!-- 列表分类 -->
		<view class="tabs">
			<u-tabs :list="titleList" lineColor="#FFF" :activeStyle="{color:'#FFF'}" :inactiveStyle="{color:'#F0FFF0'}">
				<view slot="right" style="padding-left: 8rpx;" @tap="$u.toast('插槽被点击')">
					<u-icon name="list" size="21" bold color="#FFF"></u-icon>
				</view>
			</u-tabs>
		</view>
		<!-- 未登录或购物车为空 -->
		<view v-if="goodsList.length==0" class="nullList">
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
			<button v-if="goLogin" @click="toLogin">去登录</button>
			<button v-else @click="toHome">去购物</button>
		</view>
		<!-- 商品列表 -->
		<view class="shoplist" v-else>
			<view class="shopitem" v-for="(item,idx) in goodsList" :key="item.id">
				<view>
					<!-- 单选框 -->
					<checkbox-group @change="checkOne(idx)">
						<checkbox :checked=" item.checked" />
					</checkbox-group>
				</view>
				<!-- 滑动单元格 -->
				<u-swipe-action>
					<u-swipe-action-item :options="[{text:'删除'}]" @click="delCart(item.id)">
						<view class="goods">
							<view class="imgBox">
								<image :src="baseUrl+item.img" mode=""></image>
							</view>
							<view class="textBox">
								<view class="title">
									{{item.goodsname}}
								</view>
								<view class="priceOne">
									￥{{item.price}}
									<!-- 步进器 -->
									<u-number-box :min="1" :max="10" button-size="25" v-model="item.num" :name="idx"
										@change="editCart"></u-number-box>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>
		<!-- 底部结算 -->
		<view :class="reclass">
			<!-- 单选框 -->
			<view>
				<radio-group>
					<radio :checked="checkedAll" @click="allCheck">全选</radio>
				</radio-group>
			</view>
			<!-- 结算金额 -->
			<view class="priceBox">
				<view class="textBox">
					<view class="all">
						合计
					</view>
					<view class="sBox">
						已免运费
					</view>
				</view>
				<view class="textBox">
					<!-- 总金额 -->
					<view class="sumPrice">
						￥{{sumPrice}}
					</view>
					<view class="sBox">
						已优惠￥0元
					</view>
				</view>
				<!-- 结算按钮 -->
				<view class="btn">
					<button @click="toOrder">结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入基础地址
	import baseUrl from "@/request/baseUrl.js"
	//引入接口地址
	import {
		cartList,
		cartDelete,
		cartEdit,
	} from "../../request/app.js"
	export default {
		data() {
			return {
				titleList: [{
					name: "全部"
				}, {
					name: "降价(2)"
				}, {
					name: "常卖(3)"
				}, {
					name: "分类"
				}, {
					name: "店铺"
				}, {
					name: "排序"
				}],
				goodsList: [],
				baseUrl: baseUrl,
				value: 2,
				// #ifdef H5
				reclass: "butBoxH5",
				// #endif
				// #ifdef MP-WEIXIN
				reclass: "butBox",
				// #endif
				checkedAll: false,
				sumPrice: 0,
				goLogin: false
			}
		},
		methods: {
			//购物车列表方法
			getList() {
				let _this = this
				// 判断本地信息
				if (!uni.getStorageSync("userInfo")) {
					uni.showModal({
						title: "提示",
						content: "未登录，请先登录！",
						success(res) {
							if (res.confirm) {
								_this.toLogin()
							}
							if (res.cancel) {
								_this.goLogin = true
							}
						}
					})
					return
				}
				//获取购物车列表响应
				cartList({
					uid: uni.getStorageSync("userInfo").uid
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						this.goodsList = res.data.list || []
						console.log(this.goodsList);
						//通过循环添加cheaced属性
						this.goodsList.map((item) => {
							item.checked = false
						});
					} else {
						uni.showModal({
							title: "提示",
							content: "登录过期，请重新登录！",
							success(res) {
								if (res.confirm) {
									_this.toLogin()
								}
								if (res.cancel) {
									_this.goLogin = true
								}
							}
						})
					}
				})
			},
			//点击删除购物车
			delCart(id) {
				cartDelete({
					id
				}).then(res => {
					console.log(res);
				})
				this.getList()
			},
			//点击修改购物车信息
			editCart(e) {
				console.log(e);
				let goods = this.goodsList[e.name]
				//判断是添加还是减少
				if (goods.num < e.value) {
					cartEdit({
						id: goods.id,
						type: 2
					}).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "添加成功"
							})
							this.allPrice()
						}
					})
				} else if (goods.num > e.value) {
					cartEdit({
						id: goods.id,
						type: 1
					}).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "删除成功"
							})
							this.allPrice()
						}
					})
				}
			},
			//点击全选控制单选
			allCheck() {
				this.checkedAll = !this.checkedAll
				this.goodsList.map((item) => {
					item.checked = this.checkedAll;
				});
				this.allPrice()
			},
			//点击单选控制全选
			checkOne(idx) {
				this.goodsList[idx].checked = !this.goodsList[idx].checked
				this.checkedAll = this.goodsList.every((item) => item.checked);
				console.log(this.goodsList[idx].checked);
				this.allPrice()
			},
			//合计金额
			allPrice() {
				let sum = 0
				this.goodsList.map(item => {
					if (item.checked) {
						sum += item.price * item.num
					}
				})
				this.sumPrice = sum
			},
			//去登录
			toLogin() {
				// 跳转到登录
				// #ifdef H5
				uni.reLaunch({
					url: "/pages/login/login"
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.reLaunch({
					url: "/pages/mine/mine"
				})
				// #endif
			},
			//去首页
			toHome() {
				uni.reLaunch({
					url: "/pages/home/home"
				})
			},
			//创建订单
			toOrder() {
				if (this.goodsList.some(item => item.checked) == false) {
					uni.showToast({
						title: "请至少勾选一项",
						icon: 'error'
					})
					return
				}
				let goodsInfo = []
				this.goodsList.forEach(item => {
					if (item.checked) {
						goodsInfo.push(item)
					}
				})
				//将商品信息存入本地
				uni.setStorageSync("goodsInfo", goodsInfo)
				//跳转到订单页
				uni.navigateTo({
					url: "/pages/order/order"
				})
			}
		},

		//页面一加载
		onLoad() {
			this.getList()
		}
	}
</script>

<style>
	.tabs {
		padding: 20rpx;
		background: linear-gradient(to bottom, #FF6900, #FF9A00);
	}

	.shoplist {
		background-color: #f7f7f7;
		padding: 20rpx;
		padding-bottom: 10rpx;
	}

	.shopitem {
		display: flex;
		justify-content: flex-start;
		background-color: #fff;
		height: 200rpx;
		line-height: 200rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.imgBox>image {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.goods {
		width: 100%;
		height: 200rpx;
		display: flex;
		overflow: hidden;
	}

	.title {
		width: 100%;
		height: 80rpx;
		overflow: hidden;
		font-size: 30rpx;
		line-height: 40rpx;
		font-weight: bold;
	}

	.priceOne {
		height: 80rpx;
		color: #FF3333;
		font-size: 40rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		line-height: 80rpx;
		padding-top: 30rpx;
	}

	.butBox {
		position: fixed;
		width: 100%;
		height: 150rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		line-height: 150rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #CCC;
		border-top: 2rpx solid #CCC;
		bottom: 0rpx;
		background-color: #fff;
		z-index: 2;
	}

	.butBoxH5 {
		position: fixed;
		width: 100%;
		height: 150rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		line-height: 150rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #CCC;
		border-top: 2rpx solid #CCC;
		bottom: 100rpx;
		background-color: #fff;
		z-index: 2;
	}

	.priceBox {
		width: 80%;
		line-height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.textBox {
		padding-top: 25rpx;
	}

	.all {
		font-weight: bold;
		font-size: 40rpx;
	}

	.sBox {
		color: #ccc;
	}

	.sumPrice {
		font-size: 40rpx;
		font-weight: bold;
		color: #FF3333;
	}

	.btn {
		width: 40%;
	}

	.btn>button {
		width: 100%;
		height: 100%;
		background-color: #FF6900;
		line-height: 150rpx;
		color: #fff;
		text-align: center;
		font-size: 40rpx;
	}

	.nullList>button {
		width: 50%;
		margin-top: 200rpx;
		color: #FFF;
		background-color: #FF6900;
	}
</style>
